
    <!-- 门户模板弹窗设置暂不投入使用 -->
    <!-- 门户模板弹窗设置暂不投入使用 -->
    <!-- 门户模板弹窗设置暂不投入使用 -->

<template>
  <el-dialog :title="title" :visible.sync="visible" width="800px">
    <!-- 主体内容 -->
    <div class="main">
      <!-- tab -->
      <ul class="main-tabs">
        <li
          class="main-tabs-item pointer"
          :class="{ active: i===0 }"
          v-for="(v, i) in tabs"
          :key="i"
        >
          <i :class="['main-tabs-item-icon', 'iconfont', v.icon]"></i>
          <span class="main-tabs-item-text ml_12">{{ v.tabName }}</span>
        </li>
      </ul>

      <div class="main-content">
        <component :is="componentId"></component>
      </div>
    </div>

    <div slot="footer">
      <el-button type="default" @click="visible = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary">{{ $t('common.base.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
/** vue */
import { reactive, toRefs } from 'vue';
import SettingBasic from '@src/modules/portal/components/SettingBasic.vue'

export default {
  name: 'setting-dialog',
  components:{
    SettingBasic
  },
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const state = reactive({
      visible: false,
      tabs: [
        {
          icon: 'icon-setting',
          tabName: '基本设置',
          component: 'SettingBasic',
        },
        {
          icon: 'icon-shujudaping',
          tabName: '门户信息',
          component: '',
        },
        {
          icon: 'icon-fdn-related_task',
          tabName: '第三方应用',
          component: '',
        },
      ],
      componentId:''
    });

    const openDialog = () => {
      state.visible = true;
      if(!state.componentId){
        state.componentId = 'SettingBasic'
      }
    };

    return {
      ...toRefs(state),
      openDialog,
    };
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 440px;
  display: flex;

  &-tabs {
    width: 175px;
    height: 100%;
    overflow-y: auto;
    padding-right: 15px;
    box-sizing: border-box;
    border-right: 1px solid rgba(232, 232, 232, 1);

    &-item {
      width: 100%;
      height: 36px;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #595959;
      border-radius: 4px;
      box-sizing: border-box;
      padding-left: 18px;
      margin-bottom: 10px;

      &-icon {
      }

      &-text {
      }

      &.active {
        background: $color-primary-light-1;
        color: $color-primary-light-6;
      }
    }
  }

  &-content{
    width: 560px;
    height: 100%;
    overflow-y: auto;
    margin-left: 26px;
  }
}
</style>